import "../css/layoutCommon.scss";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import { useState } from "react";

import FloatBtn from "./floatBtn";
import Login from "./Login";

import { Select, Layout, Menu, Input, Button, Modal } from "antd";
const { Header, Content, Footer } = Layout;
const { Search } = Input;
const items = [
  {
    key: "/",
    label: "首页",
  },
  {
    key: "/pageApp",
    label: "应用",
  },
  {
    key: "/extensions",
    label: "插件",
  },
];

// styled
const LoginBtn = styled.span`
  color: #fff;
  padding-left: 20px;
  cursor: pointer;
`;
export default function LayoutCommon({ children }) {
  const navigation = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showOrHideModal = (flag) => {
    setIsModalOpen(flag);
  };
  const onSearch = (value, _e, info) => console.log(info?.source, value);
  const onClickMenu = ({ item, key, keyPath, domEvent }) => {
    console.log(key);
    navigation(key);
  };
  return (
    <Layout>
      <Header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 1,
          width: "100%",
          display: "flex",
          alignItems: "center",
        }}
      >
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          items={items}
          style={{
            flex: 1,
            minWidth: 0,
          }}
          onClick={onClickMenu}
        />
        <Search
          className="custom-layout-select"
          addonBefore={
            <Select
              defaultValue="综合"
              style={{
                width: 120,
              }}
              options={[
                {
                  value: "综合",
                  label: "综合",
                },
                {
                  value: "PC软件",
                  label: "PC软件",
                },
                {
                  value: "插件",
                  label: "插件",
                },
                {
                  value: "游戏",
                  label: "游戏",
                },
              ]}
            />
          }
          placeholder="请输入搜索关键字"
          allowClear
          onSearch={onSearch}
          style={{
            width: 400,
          }}
        />
        <LoginBtn
          onClick={() => {
            showOrHideModal(true);
          }}
        >
          登录/注册
        </LoginBtn>
      </Header>
      <Content
        style={{
          // padding: "48px",
          minHeight: "calc(100vh - 264px)",
          background: "white",
        }}
      >
        {children}
      </Content>
      <Footer
        style={{
          background: "#001529",
          height: "200px",
          padding:"40px 0",
        }}
        className="footer"
      >
        <div className="left">
          本站为非营利性个人网站，本站所有软件来自于互联网，版权属原著所有，如有需要请购买正版。如有侵权，敬请来信联系我们，我们立刻删除。
        </div>
        <div className="right">
          <span>关于网站</span>
          <span>下载帮助</span>
          <span>版权声明</span>
          <span>会员说明</span>
        </div>
      </Footer>
      <FloatBtn />
      {/* 登录弹框 */}
      <Modal
        title="登录/注册"
        open={isModalOpen}
        onCancel={() => {
          showOrHideModal(false);
        }}
        footer={null}
      >
        <Login />
      </Modal>
    </Layout>
  );
}
